<template>
  <div class="data_permission">
    <header-title :name="name"
                  :dutyName="dutyName">
      <div slot="system"
           class="system-selete">
        <span>角色：</span>
        <Select v-model="model2"
                style="width:200px"
                @on-change="Select_juese">
          <Option v-for="item in jueseList"
                  :value="item.id"
                  :label="item.roleName"
                  :key="item.id"></Option>
        </Select>
      </div>
      <div slot="system">
        <span>权限类型：</span>
        <span style="margin-left:20px;cursor:pointer"
              v-if="hasPermission('moms:staff:datapermission')"
              :class="[flag?'':'activered']">数据权限</span>
        <span style="margin-left:20px;cursor:pointer"
              v-if="hasPermission('moms:staff:functionpermission')"
              @click="goFunctionSet"
              :class="[!flag?'':'activered']">功能权限</span>
      </div>
      <div slot="system"
           class="system-selete">
        <span>操作系统：</span>
        <Select v-model="model1"
                style="width:200px"
                @on-change="Select_change">
          <Option v-for="item in caozuoList"
                  :value="item.id"
                  :label="item.resName"
                  :key="item.id"></Option>
        </Select>
      </div>
    </header-title>

    <div class="content"
         style="border-top:1px solid #e8eaec;min-width:1110px;">
      <ul>
        <li class="content-menu">
          <div class="system-ad">
            <span>模块</span>
          </div>
          <div class="system-ds">
            <div class="system-ds-content">
              <div class="system-ds-second">
                <span>菜单</span>
              </div>
              <div class="system-ds-third">
                <!-- <div class="system-ds-third-list"> -->
                <div class="system-ds-third-data">数据</div>
                <div class="system-ds-third-oper"
                     v-if='dataArrDat.length>0'>
                  <Checkbox v-model="single1"
                            style="margin-right:32px"
                            :disabled="single1"
                            @on-change="selectalldata">全选</Checkbox>
                  <Checkbox v-model="single2"
                            :disabled="single2"
                            style="margin-right:5px;"
                            @on-change="selectpartdata">全选</Checkbox>
                  <Checkbox v-model="single3"
                            :disabled="single3"
                            @on-change="selectpartchidrendata">全选</Checkbox>
                </div>
                <!-- </div> -->
              </div>
            </div>

          </div>
        </li>
        <li v-for="(item,index) in dataArrDat"
            v-if="item.childList.filter(item => item.childList.length > 0).length > 0"
            :key="index">
          <div class="system-ad">
            <span>
              {{item.resName}}
              <!-- <Checkbox  :value="checkItemAll"  @click.prevent.native="handleCheckItemAll">{{item.resName}}</Checkbox> -->
            </span>
          </div>
          <div class="system-ds">
            <div class="system-ds-content"
                 v-if="secondItem.childList.length > 0"
                 v-for="(secondItem,index) in item.childList"
                 :key="index">
              <div class="system-ds-second">
                <span>
                  {{secondItem.resName}}
                  <!-- <Checkbox  :value="checkItemAll"  @click.prevent.native="handleCheckItemAll">{{secondItem.resName}}</Checkbox> -->
                </span>
              </div>
              <div class="system-ds-Radio">
                <div v-for="(thirdItem,index) in secondItem.childList"
                     :key="index"
                     class="aa">
                  <div class="aa-data">
                    <div class="aa-span">{{thirdItem.resName}}</div>
                    <div class="aa-data-div">
                      <RadioGroup v-model="thirdItem.scopeType">
                        <Radio label="1">全部数据</Radio>
                        <Radio label="2">部门</Radio>
                        <Radio label="3">部门以及子部门</Radio>
                      </RadioGroup>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <Spin size="large"
            fix
            v-if="spinShow"></Spin>
    </div>
    <div class="system_submit"
         v-if='dataArrDat.length>0'>
      <Button type="primary"
              class="system-submit-btn"
              @click="baocun">保存</Button>
      <Button class="system-submit-btn"
              @click="cancel">取消</Button>
    </div>
  </div>
</template>
<script>
import { routeEqual } from '@/libs/util'
import HeaderTitle from '@/view/components/header-title/header-title.vue'
import {
  getUserData,
  getResourceList,
  getUserInfos,
  setDataGrant
} from '@/api/system/employee.js'
export default {
  name: 'employee_data_permission',
  components: { HeaderTitle },
  data () {
    return {
      spinShow: true,
      name: '员工姓名',
      single1: false,
      single2: false,
      single3: false,
      ids1: [],
      ids2: [],
      ids3: [],
      idsList: [],
      dutyName: '',
      value: [],
      disabledGroup: '',
      flag: false,
      checkAll: false,
      indeterminate: true,
      indeterItemminate: true,
      checkItemAll: false,
      title: ['模块', '菜单', '数据'],
      list: [
        { name: '全部数据', num: 1, selected: false },
        { name: '部门数据', num: 2, selected: false },
        { name: '部门及子部门数据', num: 3, selected: false }
      ],
      idInfos: {
        id: '', // 用户id
        roleId: '', // 角色id
        appId: '' // 应用id
      },
      dataArrDat: [],
      dataArrFun: [],
      model1: '',
      model2: '',
      caozuoList: [],
      jueseList: []
    }
  },
  watch: {
    dataArrDat: {
      handler (value) {
        this.filterChecked(value)
      },
      deep: true
    }
  },
  mounted () {
    this.getCaozuoList()
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (vm.idInfos.id !== to.params.id && vm.idInfos.id !== '') {
        vm.idInfos.id = to.params.id
        getUserInfos({// 获取用户信息
          'id': to.params.id,
          'orgId': to.query.orgId
        }).then((res) => {
          if (res.data.status === 200) {
            if (res.data.data.roleList) {
              vm.jueseList = res.data.data.roleList
              vm.model2 = vm.jueseList[0].id
              vm.idInfos.roleId = vm.jueseList[0].id
              vm.dutyName = res.data.data.username
              if (to.query.roleId || to.query.appId) {
                vm.model2 = to.query.roleId
                vm.model1 = to.query.appId
                vm.idInfos.roleId = vm.model2
                vm.idInfos.appId = vm.model1
                getUserData({
                  merchantId: vm.$store.state.user.merchantId,
                  orgId: to.query.orgId,
                  ...vm.idInfos
                }).then(res => {
                  if (res.data.status === 200) {
                    vm.spinShow = false
                    if (res.data.data.childList) {
                      res.data.data.childList.forEach(ele => {
                        if (ele.childList) {
                          ele.childList.forEach(item => {
                            if (item.childList.length > 0) {
                              item.childList.forEach(rez => {
                                if (!rez.scopeType) {
                                  rez.scopeType = '2'
                                } else {
                                  rez.scopeType = rez.scopeType + ''
                                }
                              })
                            }
                          })
                        }
                      })
                      vm.dataArrDat = res.data.data.childList
                    }
                    if (!res.data.data.childList.length) {
                      vm.$Message.error(`请先添加功能权限`)
                    }
                  } else {
                    vm.$Message.error(`${res.data.error}`)
                  }
                })
              } else {
                getUserData({
                  merchantId: vm.$store.state.user.merchantId,
                  orgId: to.query.orgId,
                  ...vm.idInfos
                }).then(res => {
                  vm.spinShow = false
                  if (res.data.status === 200) {
                    if (res.data.data.childList) {
                      res.data.data.childList.forEach(ele => {
                        if (ele.childList) {
                          ele.childList.forEach(item => {
                            if (item.childList.length > 0) {
                              item.childList.forEach(rez => {
                                if (!rez.scopeType) {
                                  rez.scopeType = '2'
                                } else {
                                  rez.scopeType = rez.scopeType + ''
                                }
                              })
                            }
                          })
                        }
                      })
                      vm.dataArrDat = res.data.data.childList
                    }
                    if (!res.data.data.childList.length) {
                      vm.$Message.error(`请先添加功能权限`)
                    }
                  } else {
                    vm.$Message.error(`${res.data.error}`)
                  }
                })
              }
            } else {
              vm.jueseList = []
              vm.model2 = ''
              vm.dataArrDat = []
              vm.$Message.error('此员工所在角色已全部禁用')
            }
          } else {
            vm.$Message.error(`${res.data.error}`)
          }
        })
      } else {
        vm.idInfos.id = to.params.id
        // console.log(vm.$route.query.roleId === to.query.roleId)
        if (to.query.roleId || to.query.appId) {
          if (vm.model2 !== to.query.roleId || vm.model1 !== to.query.appId) {
            vm.model2 = to.query.roleId
            vm.model1 = to.query.appId
            vm.idInfos.roleId = vm.model2
            vm.idInfos.appId = vm.model1
            getUserData({
              merchantId: vm.$store.state.user.merchantId,
              orgId: to.query.orgId,
              ...vm.idInfos
            }).then(res => {
              if (res.data.status === 200) {
                vm.spinShow = false
                if (res.data.data.childList) {
                  res.data.data.childList.forEach(ele => {
                    if (ele.childList) {
                      ele.childList.forEach(item => {
                        if (item.childList.length > 0) {
                          item.childList.forEach(rez => {
                            if (!rez.scopeType) {
                              rez.scopeType = '2'
                            } else {
                              rez.scopeType = rez.scopeType + ''
                            }
                          })
                        }
                      })
                    }
                  })
                  vm.dataArrDat = res.data.data.childList
                }
                if (!res.data.data.childList.length) {
                  vm.$Message.error(`请先添加功能权限`)
                }
              } else {
                vm.$Message.error(`${res.data.error}`)
              }
            })
          }
        }
      }
    })
  },
  methods: {
    isOne (currentValue) {
      if (currentValue.scopeType === '1') {
        if (this.ids1.indexOf(currentValue.id) < 0) {
          this.ids1.push(currentValue.id)
        }
      }
      return this.ids1.length
    },
    isTwo (currentValue) {
      if (currentValue.scopeType === '2') {
        if (this.ids2.indexOf(currentValue.id) < 0) {
          this.ids2.push(currentValue.id)
        }
      }
      return this.ids2.length
    },
    isThree (currentValue) {
      if (currentValue.scopeType === '3') {
        if (this.ids3.indexOf(currentValue.id) < 0) {
          this.ids3.push(currentValue.id)
        }
      }
      return this.ids3.length
    },
    fliterList (currentValue) {
      if (this.idsList.indexOf(currentValue.id) < 0) {
        this.idsList.push(currentValue.id)
      }
      return this.idsList.length
    },
    cancel () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit(
        'setTagNavList',
        this.$store.state.app.tagNavList.filter(
          item => !routeEqual(this.$route, item)
        )
      )
    },
    filterChecked (data) {
      this.ids1 = []
      this.ids2 = []
      this.ids3 = []
      this.idsList = []
      data.map(ele => {
        ele.childList.map(item => {
          if (item.childList.length > 0) {
            item.childList.map(rez => {
              this.isOne(rez)
              this.isTwo(rez)
              this.isThree(rez)
              this.fliterList(rez)
            })
          }
        })
      })
      if (this.ids1.length === this.idsList.length) {
        this.single1 = true
        this.single2 = false
        this.single3 = false
      } else if (this.ids2.length === this.idsList.length) {
        this.single1 = false
        this.single2 = true
        this.single3 = false
      } else if (this.ids3.length === this.idsList.length) {
        this.single1 = false
        this.single2 = false
        this.single3 = true
      } else {
        this.single1 = false
        this.single2 = false
        this.single3 = false
      }
    },
    baocun () {
      let resList = []
      this.dataArrDat.forEach(ele => {
        ele.childList.forEach(item => {
          if (item.childList.length > 0) {
            item.childList.forEach(rez => {
              let obj = {}
              obj.resId = rez.id
              obj.scopeType = rez.scopeType
              resList.push(obj)
            })
          }
        })
      })
      setDataGrant({
        merchantId: this.$store.state.user.merchantId,
        userId: this.idInfos.id,
        appId: this.model1,
        resList: resList
      }).then(res => {
        if (res.data.status === 200) {
          this.$Message.success('保存成功')
          this.$store.commit('closeTag', this.$route)
          this.$store.commit(
            'setTagNavList',
            this.$store.state.app.tagNavList.filter(
              item => !routeEqual(this.$route, item)
            )
          )
        } else {
          this.$Message.error('保存失败')
        }
      })
    },
    Select_juese (data) {
      this.idInfos.roleId = data
      const { name, query, params } = this.$route
      let objQuery = Object.assign({}, query)
      objQuery.roleId = data
      this.$router.replace({ name, query: objQuery, params })
      this.spinShow = true
      this.grtUserDataAll(this.idInfos)
    },
    Select_change (data) {
      this.spinShow = true
      this.idInfos.appId = data
      const { name, query, params } = this.$route
      let objQuery = Object.assign({}, query)
      objQuery.appId = data
      this.$router.replace({ name, query: objQuery, params })
      setTimeout(() => {
        this.grtUserDataAll(this.idInfos)
      }, 100)
    },
    getCaozuoList () {
      // 获取操作系统
      getResourceList({
        merchantId: this.$store.state.user.merchantId,
        resType: 0
      }).then(res => {
        if (res.data.status === 200) {
          this.caozuoList = res.data.data
          if (this.$route.query.roleId || this.$route.query.appId) {
            this.model1 = this.$route.query.appId
            this.idInfos.appId = this.$route.query.appId
          } else {
            this.model1 = this.caozuoList[0].id
            this.idInfos.appId = this.caozuoList[0].id
          }
          this.router()
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    router () {
      this.idInfos.id = this.$route.params.id
      if (this.idInfos.id) {
        getUserInfos({
          // 获取用户信息
          id: this.idInfos.id,
          orgId: this.$route.query.orgId
        }).then(res => {
          if (res.data.status === 200) {
            if (res.data.data.roleList) {
              this.jueseList = res.data.data.roleList
              if (this.$route.query.roleId || this.$route.query.appId) {
                this.model2 = this.$route.query.roleId
                this.idInfos.roleId = this.$route.query.roleId
              } else {
                this.model2 = this.jueseList[0].id
                this.idInfos.roleId = this.jueseList[0].id
              }
              this.dutyName = res.data.data.username
              const { name, query, params } = this.$route
              let objQuery = Object.assign({}, query)
              objQuery.roleId = this.idInfos.roleId
              objQuery.appId = this.idInfos.appId
              this.$router.replace({ name, query: objQuery, params })
              this.grtUserDataAll(this.idInfos)
            } else {
              this.spinShow = false
              this.$Message.error('此员工所在角色已全部禁用')
            }
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
      }
    },
    selectalldata (value) {
      if (value) {
        this.dataArrDat.map(ele => {
          ele.childList.map(item => {
            if (item.childList.length > 0) {
              item.childList.map(rez => {
                this.$set(rez, 'scopeType', '1')
              })
            }
          })
        })
      }
    },
    selectpartdata (value) {
      if (value) {
        this.dataArrDat.map(ele => {
          ele.childList.map(item => {
            if (item.childList.length > 0) {
              item.childList.map(rez => {
                this.$set(rez, 'scopeType', '2')
              })
            }
          })
        })
      }
    },
    selectpartchidrendata (value) {
      if (value) {
        this.dataArrDat.map(ele => {
          ele.childList.map(item => {
            if (item.childList.length > 0) {
              item.childList.map(rez => {
                this.$set(rez, 'scopeType', '3')
              })
            }
          })
        })
      }
    },
    grtUserDataAll (data) {
      // 获取数据权限
      getUserData({
        merchantId: this.$store.state.user.merchantId,
        orgId: this.$route.query.orgId,
        ...data
      }).then(res => {
        if (res.data.status === 200) {
          this.spinShow = false
          if (res.data.data.childList) {
            res.data.data.childList.forEach(ele => {
              if (ele.childList) {
                ele.childList.forEach(item => {
                  if (item.childList.length > 0) {
                    item.childList.forEach(rez => {
                      if (!rez.scopeType) {
                        rez.scopeType = '2'
                      } else {
                        rez.scopeType = rez.scopeType + ''
                      }
                    })
                  }
                })
              }
            })
            this.dataArrDat = res.data.data.childList
            // this.filterChecked(this.dataArrDat)
          }
          if (!res.data.data.childList.length) {
            this.single1 = false
            this.single2 = false
            this.single3 = false
            this.$Message.error(`请先添加功能权限`)
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    goFunctionSet () {
      this.$router.push({
        name: 'employee_function_permission',
        params: {
          id: this.idInfos.id
        },
        query: {
          orgId: this.$route.query.orgId,
          roleId: this.model2,
          appId: this.model1
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.activered {
  color: black;
  font-size: 14px;
  font-weight: bold;
}
.system_submit {
  padding-top: 30px;
  padding-bottom: 30px;
  width: 200px;
  margin: auto;
  .system-submit-btn {
    width: 80px;
    margin-left: 18px;
  }
}
</style>
<style lang="less">
.data_permission {
  .header-title {
    padding: 24px 32px;
    height: 80px;
    border: none;
    background: #ffffff;
    .title {
      font-family: PingFangSC-Medium;
      font-size: 14px;
      color: #17233d;
      font-weight: bold;
    }
  }
  .system-selete {
    display: flex;
    align-items: center;
  }
  .content {
    position: relative;
    border-top: 1px solid #e8eaec;
    width: 100%;
    background: #ffffff;
    > ul {
      > li {
        list-style: none;
        // border-top: 1px solid #e8eaec;
        display: -webkit-flex;
        .system-ad {
          width: 20%;
          border-right: 1px solid #e8eaec;
          border-bottom: 1px solid #e8eaec;
          display: flex;
          justify-content: center;
          flex-direction: column;
          > span {
            display: inline-block;
            width: 100%;
            padding-left: 20px;
          }
        }
      }
      .content-menu {
        height: 40px;
        line-height: 40px;
        background: #f8f8f9;
      }
      .thirdItem-name {
        border-bottom: 1px solid #e8eaec;
        min-height: 114px;
      }
      .thirdItems-name {
        min-height: 114px;
      }
      .system-ds {
        width: 80%;
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        flex-wrap: wrap;
        .system-ds-content {
          width: 100%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          display: -webkit-flex;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
          -ms-flex-direction: row;
          flex-direction: row;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          border-bottom: 1px solid #e8eaec;
          .system-ds-second {
            width: 30%;
            display: flex;
            justify-content: center;
            flex-direction: column;
            border-right: 1px solid #e8eaec;
            > span {
              display: inline-block;
              width: 100%;
              padding-left: 20px;
            }
          }
          .system-ds-third {
            width: 70%;
            display: flex;
            display: -webkit-flex;
            flex-direction: row;
            flex-wrap: wrap;
            padding-left: 20px;
            .system-ds-third-data {
              width: 250px;
            }
            .system-ds-third-oper {
              padding-left: 10px;
            }
          }
          .system-ds-name {
            width: 180px;
            padding: 18px 0;
            padding-right: 21px;
          }
        }
      }
    }

    .checkall {
      height: 50px;
      line-height: 50px;
      background: #f3f3f3;
      // border: 1px solid #e8eaec;
      border: 1px solid #e8eaec;
      text-align: center;
    }
    .system_submit {
      padding: 32px;
      .system-submit-btn {
        width: 100px;
        height: 32px;
        margin-right: 24px;
      }
    }
  }
  .system-ds-Radio {
    padding-left: 20px;
    width: 70%;
    padding-top: 21px;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    flex-wrap: -webkit-wrap;
    align-items: center;
    align-items: -webkit-center;
    .aa {
      width: 100%;
      margin-right: 80px;
      .aa-data {
        .aa-span {
          display: inline-block;
          vertical-align: middle;
          width: 250px;
        }
        .aa-data-div {
          margin-bottom: 20px;
          display: inline-block;
          margin-left: 10px;
        }
      }
    }
    .aa:nth-of-type(2n) {
      margin-right: 0px;
    }
  }
}
</style>
